import { Tabs, class_esy, Flex, isArray, StarOutlined, isEmpty } from 'esy-ui';
import { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Empty, Img } from '@/components';
import { useFormatText, useNavigation } from '@/hooks';
import { flexGridCn } from '@/styles/esy-ui';
import { postMainMenu } from '@/services';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { useGame } from '@/hooks/useGame';
import { useOtherStore } from '@/mobx/other';

const url = 'https://g1.torry.vip/game_picture/mobile/58/58053.png?v=1731640826';
const tabss = [
  {
    title: 'text_7',
    paneKey: '2',
    icon: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular.png?v=34',
    iconAct: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular_active.png?v=34',
    contentData: [
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点', cols: 2 },
      { url, name: 'RG', desc: '随便一点随便一点', cols: 2 },
    ],
  },
  {
    title: 'text_7',
    paneKey: '1',
    icon: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular.png?v=34',
    iconAct: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular_active.png?v=34',
    contentData: [
      { url, title: '体育', cols: 6 },
      { url, title: 'NEW 体育', cols: 6 },
      { url, title: '随便', cols: 3 },
      { url, title: '随便', cols: 3 },
    ],
  },
  {
    title: 'text_7',
    paneKey: '3',
    icon: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular.png?v=34',
    iconAct: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular_active.png?v=34',
    contentData: [
      { url, title: '体育', cols: 6 },
      { url, title: 'NEW 体育', cols: 6 },
      { url, title: '随便', cols: 3 },
      { url, title: '随便', cols: 3 },
    ],
  },
  {
    title: 'text_7',
    paneKey: '4',
    icon: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular.png?v=34',
    iconAct: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular_active.png?v=34',
  },
  {
    title: 'text_7',
    paneKey: '5',
    icon: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular.png?v=34',
    iconAct: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular_active.png?v=34',
    contentData: [
      { url: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/vendor-icon/159.png?v=34', title: '体育', cols: 6 },
      { url: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/vendor-icon/31.png?v=34', title: 'NEW 体育', cols: 6 },
      { url: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/vendor-icon/65.png?v=34', title: '随便', cols: 3 },
      { url: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/vendor-icon/65.png?v=34', title: '随便', cols: 3 },
    ],
  },
  {
    title: 'text_7',
    paneKey: '6',
    icon: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular.png?v=34',
    iconAct: 'https://g1.lizixin.cool/web/mobile/backend-image/theme/7/platform_popular_active.png?v=34',
  },
];

function RenderTitle(props: any) {
  const { icon, iconAct, title, isActive } = props;

  const { text } = useFormatText();

  return (
    <div className={class_esy(['flex items-center text-sm py-1 px-1.5 rounded h-13.5 w-24 cursor-pointer', isActive ? 'bg-menu text-bdr' : 'bg-head text-white'])}>
      <Img className={class_esy([isActive && 'hidden', 'w-5 h-5'])} src={icon} />
      <Img className={class_esy([!isActive && 'hidden', 'w-5 h-5'])} src={iconAct} />
      <div className='ml-1'>{text(title)}</div>
    </div>
  );
}

const RenderContent = observer(({ data }: any) => {
  const { userInfo } = useUserInfoStore();
  const { isCollet, colletCount } = useOtherStore();
  const navigation = useNavigation();
  const { clickGame, clickCollct } = useGame(userInfo?.Token, true);

  console.info(colletCount);

  const renderChildren = (props) => {
    const { name, Describe, TitleImage, Gid } = props;

    const onCollect = () => {
      // 收藏
      clickCollct(Gid);
    };

    const goGame = () => {
      // 玩游戏
      if (userInfo?.Token) {
        clickGame(Gid);
      } else {
        navigation('/login');
      }
    };

    return (
      <>
        <div onClick={goGame}>
          <Img boxClassName='w-20 h-20' src={TitleImage} />
          {name ? <div className='absolute text-sm text-white font-bold left-2 top-2'>{name}</div> : null}
          {/* {Title ? <div className='absolute text-xs bg-mask rounded-full text-center text-white font-bold left-2 right-2 bottom-5'>{Title}</div> : null} */}
          {Describe ? <div className='text-xs text-name truncate text-center mt-1'>{Describe}</div> : null}
        </div>
        {userInfo?.Token ? (
          <div
            className={class_esy(['flex items-center justify-center mx-auto mt-1 py-0.5 w-12 border border-solid rounded', isCollet(Gid) ? 'bg-primary text-black' : 'text-white border-white'])}
            onClick={onCollect}
          >
            <StarOutlined className='text-xs' />
          </div>
        ) : null}
      </>
    );
  };

  if (isEmpty(data)) return <Empty />;

  return <Flex className='w-full h-full absolute left-0 top-0 overflow-y-auto' classNames={flexGridCn} list={data.map((it) => ({ ...it, cols: 2 }))} renderChildren={renderChildren} />;
});

function Content() {
  const [tabs, setTabs] = useState([]);
  const { changeState } = useGlobalStore();

  useEffect(() => {
    changeState('isLoading', true);
    postMainMenu({})
      .then((res: any) => {
        if (isArray(res?.Data)) {
          setTabs(res.Data.map((it) => ({ title: it.Title, icon: it.TitleImage, paneKey: it.Title, iconAct: it.AcTitleImage, contentData: it.GameList, id: it.Id })));
        } else {
          throw new Error('error');
        }
      })
      .catch(() => {
        setTabs(tabss);
      })
      .finally(() => {
        changeState('isLoading', false);
      });
  }, [changeState]);

  return <Tabs indicatorRatio={0} direction='vertical' tabs={tabs} isDestroyUnactive renderTitle={<RenderTitle />} renderContent={<RenderContent />} />;
}

export default Content;
